<!--
  author: tangcheng_cd
  create by: 2019/5/22
  descr:
-->
<template>
    <transition name="dialog-fade">
        <div class="el-dialog__wrapper v-csii-dialog" v-show="visible" @click.self="handleWrapperClick">
            <v-draggable-resizable
                class="el-dialog"
                :class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
                ref="dialog"
                :min-width="parseFloat(style.width) || 0"
                v-bind="dragResizeResizable"
            >
                <div class="el-dialog__header">
                    <slot name="title">
                        <span class="el-dialog__title">{{ title }}</span>
                    </slot>
                    <button
                        type="button"
                        class="el-dialog__headerbtn"
                        aria-label="Close"
                        v-if="showClose"
                        @click="handleClose">
                        <i class="el-dialog__close el-icon el-icon-close"></i>
                    </button>
                </div>
                <div class="el-dialog__body" v-if="rendered"><slot></slot></div>
                <div class="el-dialog__footer" v-if="$slots.footer">
                    <slot name="footer"></slot>
                </div>
            </v-draggable-resizable>
        </div>
    </transition>
</template>

<script>
    import Popup from 'element-ui/src/utils/popup'
    import Migrating from 'element-ui/src/mixins/migrating'
    import emitter from 'element-ui/src/mixins/emitter'

    export default {
        name: 'v-dialog',

        mixins: [Popup, emitter, Migrating],

        props: {
            title: {
                type: String,
                default: ''
            },

            modal: {
                type: Boolean,
                default: true
            },

            modalAppendToBody: {
                type: Boolean,
                default: true
            },

            appendToBody: {
                type: Boolean,
                default: false
            },

            lockScroll: {
                type: Boolean,
                default: true
            },

            closeOnClickModal: {
                type: Boolean,
                default: true
            },

            closeOnPressEscape: {
                type: Boolean,
                default: true
            },

            showClose: {
                type: Boolean,
                default: true
            },

            width: {
                required: true,
                type: String
            },

            fullscreen: Boolean,

            customClass: {
                type: String,
                default: ''
            },

            top: {
                type: String,
                default: '15vh'
            },
            beforeClose: Function,
            center: {
                type: Boolean,
                default: false
            }
        },

        data () {
            return {
                closed: false,
                style: {},
                dragResizeResizable: {
                    x: null,
                    y: null
                }
            }
        },

        watch: {
            visible (val) {
                if (val) {
                    this.closed = false
                    this.$emit('open')
                    this.$el.addEventListener('scroll', this.updatePopper)
                    this.$nextTick(() => {
                        this.$refs.dialog.scrollTop = 0
                    })
                    if (this.appendToBody) {
                        document.body.appendChild(this.$el)
                    }
                } else {
                    this.$el.removeEventListener('scroll', this.updatePopper)
                    if (!this.closed) this.$emit('close')
                }
            }
        },

        methods: {
            getMigratingConfig () {
                return {
                    props: {
                        'size': 'size is removed.'
                    }
                }
            },
            handleWrapperClick () {
                if (!this.closeOnClickModal) return
                this.handleClose()
            },
            handleClose () {
                if (typeof this.beforeClose === 'function') {
                    this.beforeClose(this.hide)
                } else {
                    this.hide()
                }
            },
            hide (cancel) {
                if (cancel !== false) {
                    this.$emit('update:visible', false)
                    this.$emit('close')
                    this.closed = true
                }
            },
            updatePopper () {
                this.broadcast('ElSelectDropdown', 'updatePopper')
                this.broadcast('ElDropdownMenu', 'updatePopper')
            }
        },

        mounted () {
            if (this.width) {
                this.style.width = this.width
            }
            if (!this.fullscreen) {
                this.style.marginTop = this.top
            }
            if (this.visible) {
                this.rendered = true
                this.open()
                if (this.appendToBody) {
                    document.body.appendChild(this.$el)
                }
            }
            // let parentWidth
            // let parentHeight
            // if (this.appendToBody) {
            //     parentWidth = document.body.offsetWidth
            //     parentHeight = document.body.offsetHeight
            // } else {
            //     parentWidth = this.$parent.$el.offsetWidth
            //     parentHeight = this.$parent.$el.offsetHeight
            // }
            // this.dragResizeResizable.x = (parentWidth - parseFloat(this.width)) / 2
            // this.dragResizeResizable.y = (parentHeight - selfHeight) / 2
            // console.info('this.dragResizeResizable')
            // console.info(this.dragResizeResizable.x + '---' + this.dragResizeResizable.y)
        },

        destroyed () {
            // if appendToBody is true, remove DOM node after destroy
            if (this.appendToBody && this.$el && this.$el.parentNode) {
                this.$el.parentNode.removeChild(this.$el)
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
.v-csii-dialog.el-dialog__wrapper
    .handle
        width 3px
        height 3px
        border none
        background-color #FFF
    .vdr
        border none
    .el-dialog
        .handle-tl
            top -3px
            left -3px
        .handle-tm
            top -3px
        .handle-tr
            top -3px
            right -3px
        .handle-mr
            right -3px
        .handle-br
            right -3px
            bottom -3px
        .handle-bm
            bottom -3px
        .handle-bl
            bottom -3px
            left -3px
        .handle-ml
            left -3px
        .handle-tm, .handle-bm
            width 100%
            left 0
            margin-left 0
            height 3px
        .handle-ml, .handle-mr
            height 100%
            width 3px
            top 0
            margin-top 0
</style>
